import React from 'react';
import { Message, Tag, Balloon } from '@teamix/ui';
import Icon from 'components/PersonalSettings/components/icon';
import dayjs from 'dayjs';
import DelSshItemPopup from 'components/PersonalSettings/components/confirmPopup';
import exceed from 'utils/apimap';
import intl from 'components/PersonalSettings/components/locale';

export default class SshItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHover: false,
      showPopup: false,
    };

    this.popupDisplay = this.popupDisplay.bind(this);
  }

  popupDisplay = (show) => {
    this.setState({
      showPopup: show,
    });
  };

  handleMouse = (isHover) => {
    const { showPopup } = this.state;
    if (this.state.isHover && showPopup) {
      return;
    }

    this.setState({
      isHover,
    });
  };

  onDeleteClick = () => {
    const { id } = this.props.dataSource;
    this.delKey(id);
  };

  delKey = (id) => {
    const { getKeys } = this.props;
    exceed
      .fetch({
        api: this.props.vpc ? 'vpc.keys.del' : 'keys.del',
        params: { id },
      })
      .then(() => {
        setTimeout(() => {
          Message.success({
            title: '成功',
          });
        }, 500);
        getKeys();
      });
  };

  getIcon = () => {
    const { isHover } = this.state;
    return (
      <span>
        {isHover ? (
          <DelSshItemPopup
            onVisibleChange={this.popupDisplay}
            icon={<Icon type="warning-o" />}
            type="danger"
            title={intl.get('delete_key')}
            content={intl.get('delete_key_confirm')}
            confirm={this.onDeleteClick}
            trigger={<Icon type="trashbin" style={{ color: '#ff4f3e', cursor: 'pointer' }} />}
          />
        ) : null}
      </span>
    );
  };

  render() {
    const { dataSource, vpc } = this.props;
    const sshKeyInvalid = (
      <Balloon.Tooltip
        type="primary"
        align="t"
        trigger={<Icon type="warning-o-fill" style={{ color: '#FFA003' }} />}
      >
        {intl.get('ssh_key_invalid')}
      </Balloon.Tooltip>
    );
    return (
      <div>
        <div
          className="ssh-list-item"
          onMouseEnter={() => {
            this.handleMouse(true);
          }}
          onMouseLeave={() => {
            this.handleMouse(false);
          }}
        >
          {vpc ? null : (
            <div className="ssh-list-item-ssh-img">
              <Icon type="permission" />
            </div>
          )}
          <div className="ssh-list-item-content" style={vpc ? { paddingTop: '16px' } : {}}>
            <span>
              {dataSource.title}
              {!vpc && dataSource.key_scope === 'READ' ? (
                <Tag color="gray">{intl.get('only_read')}</Tag>
              ) : null}
              {!vpc && dayjs(dataSource.expire_time).valueOf() < dayjs().valueOf()
                ? sshKeyInvalid
                : null}
            </span>
            <span>{dataSource.fingerprint}</span>
            {vpc ? null : (
              <div className="ssh-list-item-time">
                <span>
                  {intl.get('last_used_time')}：
                  {dataSource.last_used_time
                    ? dayjs(dataSource.last_used_time).format(intl.get('time_format'))
                    : '-'}
                </span>
                <span className="ssh-list-item-time-separate">|</span>
                <span>
                  {intl.get('created_time')}：
                  {dayjs(dataSource.created_at).format(intl.get('time_format'))}
                </span>
                <span className="ssh-list-item-time-separate">|</span>
                <span>
                  {intl.get('ssh_expire_time')}：
                  {dataSource.expire_time
                    ? dayjs(dataSource.expire_time).format(intl.get('time_format'))
                    : intl.get('permanent')}
                </span>
              </div>
            )}
          </div>
          <div>{this.getIcon()}</div>
        </div>
      </div>
    );
  }
}
